<template>
    <div class="index-container" style="overflow: hidden">
        <!-- 导航栏 -->
        <indexNavBar
            :title="$route.meta.title"
            :back="false"
            @click-left="$router.go(-1)"
        ></indexNavBar>

        <!-- 条件 -->
        <div class="fund-cond">
            <div class="fund-cond-list" @click="handleDateTime">
                <p v-if="timeType == 'dateTime'">{{ queryParameter.startDate }} ~ {{ queryParameter.endDate }}</p>
                <p v-if="timeType == 'month'">{{ queryParameter.startDate | monthFormat }}</p>
                <img src="../../assets/arrow-down.png" alt="">
            </div>
            <div class="fund-cond-list" @click="handleProperty">
                <p class="fund-cond-type">{{ queryParameter.property == '0' ? '收入' : (queryParameter.property == '1' ? '支出': '全部') }}</p>
                <img src="../../assets/arrow-down.png" alt="">
            </div>
            <div class="fund-cond-list" @click="handleAccount">
                <p>{{ queryParameter.accountName }}</p>
                <img src="../../assets/arrow-down.png" alt="">
            </div>
        </div>

        <!-- 统计 —— 收入、支出 -->
        <div class="fund-stats">
            <p v-if="timeType == 'dateTime'" class="fund-stats-time">{{ queryParameter.startDate }} 至 {{ queryParameter.endDate }}</p>
            <p v-if="timeType == 'month'" class="fund-stats-time">{{ queryParameter.startDate | monthFormat2 }}</p>
            <div class="fund-stats-amount">
                <p>支出 ¥{{ account.expendTotal || 0 }}</p>
                <p>收入 ¥{{ account.incomeTotal || 0 }}</p>
            </div>
        </div>

        <!-- 下拉刷新 && 上拉加载 -->
        <div class="content-scroll">
            <div style="margin-bottom: 50px">
                <template v-for="(item, index) in list">
                    <fundCard
                        :key="index"
                        :cardInfo="item"
                    ></fundCard>
                </template>
            </div>

            <indexListNone v-if="list.length == 0" :prompt="'未能找到流水清单'" />
        </div>
        <!-- 日期选择 && 月份选择 -->
        <fundDate ref="fundDate" @confirm="handleDateConfirm"></fundDate>

        <!-- 收入、支出 -->
        <fundProperty ref="fundProperty" @confirm="handlePropertyConfirm"></fundProperty>

        <!-- 账户 -->
        <fundAccount ref="fundAccount" :columns="accountList" @confirm="handleAccountConfirm"></fundAccount>
    </div>
</template>

<script>
import moment from 'moment'
import indexNavBar from '../../components/style/index-nav-bar.vue'
import indexListNone from '../../components/style/index-list-none.vue'
import fundCard from './components/fund-card.vue'
import fundDate from './components/fund-date.vue'
import fundProperty from './components/fund-property.vue'
import fundAccount from './components/func-account.vue'

export default {
    components: {
        indexNavBar,
        indexListNone,
        fundCard,
        fundDate,
        fundProperty,
        fundAccount
    },
    data () {
        return {
            timeType: 'dateTime',
            queryParameter: {
                corpNo: this.$C.corpNo,
                accountId: '',
                property: '',
                startDate: '',
                endDate: ''
            },
            account: {
                expendTotal: '',
                incomeTotal: ''
            },
            list: [],
            accountList: []
        }
    },
    mounted () {
        setTimeout(() => {
            this.init()
        }, 50)
    },
    methods: {
        /* 初始化 */
        init () {
            this.queryParameter.startDate = moment().add(0, 'month').format('YYYY-MM') + '-01'
            this.queryParameter.endDate = moment().format('YYYY-MM-DD')
            this.initAccount()
            // this.initList()
        },

        /* 账户信息 */
        initAccount () {
            let _this = this

            this.$H.get(_this, _this.$A.account.accountInfo, {})
                .then(res => {
                    _this.accountList = res.data.accountEntities.map(item => { return { no: item.accountId, text: item.accountName } })
                    console.log(_this.accountList)
                    console.log('dataCheck', res.data.dataCheck)
                    if (res.data.dataCheck == true) {
                        _this.$refs.fundAccount.pickerVal = res.data.accountEntities[0].accountId
                        _this.queryParameter.accountId = res.data.accountEntities[0].accountId
                        _this.queryParameter.accountName = res.data.accountEntities[0].accountName
                        _this.initList()
                    } else {
                        this.$toast.fail('暂无权限')
                    }

                })
                .catch(err => {
                    console.log(err)
                })
        },

        /* 初始化接口 */
        async initList () {
            let _ = this
            try {
                _.$U.showLoading(_)
                const res = await _.$H.get(_, _.$A.account.accountFlow, _.queryParameter)
                _.list = res.data.accountFlowEntities
                _.account = {
                    expendTotal: res.data.expendTotal,
                    incomeTotal: res.data.incomeTotal
                }
                _.$U.hideLoading(_)
            } catch (e) {
                _.$U.hideLoading(_)
            }
        },

        /* 时间 —— 开始选择 */
        handleDateTime () {
            this.$refs.fundDate[this.timeType].show = true
        },

        /* 时间 —— 确认 */
        handleDateConfirm (type, start, end) {
            this.timeType = type
            if (type == 'dateTime') {
                this.queryParameter.startDate = start
                this.queryParameter.endDate = end
            } else if (type == 'month') {
                this.queryParameter.startDate = moment(start).format('YYYY-MM-DD')
                this.queryParameter.endDate = moment(start).endOf('month').format('YYYY-MM-DD')
            }
            this.initList()
        },

        /* 收入、支出 —— 开始选择 */
        handleProperty () {
            this.$refs.fundProperty.show = true
        },

        /* 收入、支出 —— 确认 */
        handlePropertyConfirm (val) {
            const list = [
                { name: '全部', val: '' },
                { name: '收入', val: 0 },
                { name: '支出', val: 1 }
            ]
            this.queryParameter.property = list.filter(item => { return item.name == val })[0].val
            this.initList()
        },

        /* 账户 —— 开始选择 */
        handleAccount () {
            this.$refs.fundAccount.show = true
        },

        /* 账户 —— 确认 */
        handleAccountConfirm (val) {
            this.queryParameter.accountId = val.no
            this.queryParameter.accountName = val.text
            this.initList()
        }
    },
    filters: {
        monthFormat (val) {
            return moment(val).format('YYYY-MM')
        },
        monthFormat2 (val) {
            return moment(val).format('YYYY年MM月')
        }
    }
}
</script>

<style lang="less" scoped>
.fund-cond {
    width: 100%;
    margin: 22px 0 13px;
    padding: 0 26px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .fund-cond-list {
        font-size: 14px;
        font-weight: 600;
        color: #2D3748;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        p {
            width: 70px;
            height: 20px;
            line-height: 20px;
            margin: 0;
            padding: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        img {
            width: 8px;
            height: 8px;
            margin-left: 5px;
            display: block;
        }
        .fund-cond-type {
            width: auto;
        }
    }
}
.fund-stats {
    width: 100%;
    margin-bottom: 12px;
    padding: 11px 28px;
    background-color: #F5F9F9;
    box-sizing: border-box;
    .fund-stats-time {
        width: 100%;
        height: 20px;
        line-height: 20px;
        margin: 0 0 7px 0;
        padding: 0;
        font-size: 14px;
        font-weight: 600;
        color: #2D3748;
    }
    .fund-stats-amount {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        p {
            height: 17px;
            line-height: 17px;
            margin: 0 16px 0 0;
            padding: 0;
            font-size: 12px;
            font-weight: 400;
            color: rgba(45,55,72,.5);
        }
    }
}
.content-scroll {
    width: 100%;
    height: calc(100% - 220px);
    overflow: auto;
}
.fund-content {
    height: calc(100% - 282px);
}
</style>
